<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form inline>
        <el-form-item />
        <el-form-item label="">
          <el-select
            size="small"
            v-model="listQuery.role_id"
            default-first-option
            style="width: 180px"
            placeholder="所属角色"
            clearable
            @change="changeRole"
          >
            <el-option
              v-for="(item, index) in roleArr"
              :key="index"
              :label="item.name"
              :value="item.role_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-input
            v-model="listQuery.keyword"
            size="small"
            style="width: 300px"
            class="filter-item"
            placeholder="登录账号或真实姓名"
            clearable
        /></el-form-item>
        <el-form-item label="">
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="edit"
            @click="showCreate()"
            >添加</el-button
          >
          <!-- <el-button class="filter-item" style="margin-left: 10px;" @click="open(1)" type="primary" icon="edit">白名单IP</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="open(2)" type="primary" icon="edit">预约页面开关</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        key="tableKey"
        v-loading="listLoading"
        :data="adminList"
        element-loading-text="加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          background: '#E3ECFB',
          color: '#303133',
          fontWeight: '500'
        }"
      >
        <el-table-column align="center" label="登录账号">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="真实姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="联系方式">
          <template slot-scope="scope">
            <span>{{ scope.row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="头像" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.avatar"
              :src="scope.row.avatar"
              style="width: 30px;height:30px"
              :preview-src-list="[scope.row.avatar]"
            ></el-image>
            <!-- <img style="width: 60px" :src="scope.row.image_path" /> -->
            <el-image
              v-else
              :src="defaultHeader"
              style="width: 30px;height:30px"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属角色">
          <template slot-scope="scope">
            <span
              >{{ scope.row.rolename }}
              <span style="color:#E6A23C;">{{
                scope.row.role_status == 2 ? "已禁用 " : ""
              }}</span>
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="系统编号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->

        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="账号状态">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status == 1 && scope.row.role_status == 1
                  ? 'success'
                  : scope.row.status == 1 && scope.row.role_status == 2
                  ? 'warning'
                  : 'danger'
              "
            >
              <span>{{
                scope.row.status == 1 && scope.row.role_status == 1
                  ? "可登录"
                  : scope.row.status == 1 && scope.row.role_status == 2
                  ? "登录受限"
                  : "已禁用"
              }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updated_at }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="状态操作">
          <template slot-scope="scope">

          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作" width="300px">
          <template slot-scope="scope">
            <el-switch
              style="padding-right:10px;"
              v-model="scope.row.status"
              active-color="#13ce66"
              :inactive-value="2"
              :active-value="1"
              inactive-color="grey"
              @change="changeStatus(scope, scope.row.status)"
            >
            </el-switch>
            <el-button
              plain
              size="small"
              type="primary"
              @click="resetPwd(scope.row.id)"
              >重置密码
            </el-button>

            <el-button
              plain
              size="small"
              type="primary"
              @click="handleEdit(scope.row, 'edit')"
              >编辑
            </el-button>
            <el-button
              plain
              size="small"
              type="danger"
              @click="deleteAdmin(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container text-right">
        <el-pagination
          background
          :total="pagination.total"
          :current-page="listQuery.page"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form
        class="small-space"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <template />
        <el-form-item label="登录账号">
          <el-input size="small" v-model="temp.username" />
        </el-form-item>
        <el-form-item label="默认密码" v-if="dialogStatus == 'create'">
          <span>{{ this.df_pwd }}</span>
        </el-form-item>
        <el-form-item label="所属角色">
          <el-select
            size="small"
            v-model="temp.role_id"
            default-first-option
            placeholder="所属角色"
          >
            <!--如果status==2时，判定disabled>-->
            <el-option
              v-for="(item, index) in roleArr"
              :key="index"
              :label="item.name"
              :value="item.role_id"
              :disabled="item.status == 2"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input size="small" v-model="temp.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="temp.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input size="small" v-model="temp.telephone" />
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input
            type="textarea"
            :rows="2"
            size="small"
            v-model="temp.remarks"
            maxlength="32"
            width="100px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="create"
          >新 增</el-button
        >
        <el-button v-else type="primary" @click="update">保 存</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog title="修改密码" :visible.sync="dialogFormVisible1">
      <el-form class="small-space" :model="temp11" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
        <el-form-item label="账号">
          <span>{{temp.username}}</span>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="temp_new.newPassword" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="temp_new.confirmPassword" />
        </el-form-item>
 
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="resetPwd">确 定</el-button>
    </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  fetchAdminList,
  fetchRoleList,
  // fetchAdmin,
  changeAdmin,
  updateAdmin,
  deleteAdmin,
  addAdmin,
  resetAdmin
} from "@/api/manager";

export default {
  name: "Admin",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      roleArr: null,
      adminList: [],
      dialogFormVisible: false,
      temp: {},
      temp11: {},
      dialogStatus: null,
      ip: "",
      btn: "0",
      pagination: {},
      listQuery: {
        page: 1,
        limit: 10
      },
      dialogTitle: "添加",
      listLoading: false,
      dialogFormVisible1: false,
      temp: {},
      defaultHeader: "" //require('@/assets/default.png'),
      // dialogStatus1: null,
      // switchValue: false,
      // confirmVisible: false
    };
  },
  created() {
    //获取所有角色下拉选项
    this.getAllRoleList();
    //获取管理用户列表
    this.getAdminList();
    // fetchBtn().then((response) => {
    //   //console.log(response);
    //   this.ip = response.data.ip;
    //   this.btn = response.data.btn_reservation;
    // });
  },
  methods: {
    getAdminList() {
      this.listLoading = true;
      fetchAdminList(this.listQuery).then(response => {
        // console.log(response);
        this.adminList = response.data.data;
        this.df_pwd = response.data.df_pwd;
        //console.log(this.adminList)
        this.pagination = response.data;
        this.listLoading = false;
      });
    },
    // open(type) {
    //   let m;
    //   if (type == 1) {
    //     m = this.ip;
    //   } else {
    //     m = this.btn;
    //   }
    //   this.$prompt(
    //     "请输入,多个ip请用|连接，页面开关，1表示开，0表示关",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       inputValue: m,
    //     }
    //   )
    //     .then(({ value }) => {
    //       editBtn({ val: value, type: type }).then((response) => {
    //         this.$message({
    //           message: response.msg,
    //           type: "success",
    //         });
    //       });
    //     })
    //     .catch(() => { });
    // },
    //编辑弹窗
    handleEdit(row, status) {
      this.dialogTitle = "编辑";
      this.dialogFormVisible = true;
      // row.password = "";
      this.temp = JSON.parse(JSON.stringify(row));
      this.dialogStatus = status;
    },
    // //重置密码弹窗
    // showReset(row) {
    //   console.log(row);
    //   this.dialogTitle1 = '重置';
    //   this.dialogFormVisible1 = true
    //   // row.password = "";
    //   this.temp = JSON.parse(JSON.stringify(row))
    //   this.dialogStatus1 = status
    // },
    showCreate() {
      //按钮文字
      this.dialogStatus = "create";
      this.temp = {
        sex: "",
        telephone: "",
        created_at: "",
        updated_at: "",
        status: 1
      };
      this.btn = false;
      this.dialogTitle = "添加";
      this.dialogFormVisible = true;
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getAdminList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getAdminList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getAdminList();
    },
    create() {
      addAdmin(this.temp).then(response => {
        // console.log(response);
        if (response.code == 0) {
          this.$message({
            message: response.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          this.getAdminList();
        } else {
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      });
    },
    update() {
      updateAdmin(this.temp).then(response => {
        // console.log(response);
        if (response.code == 0) {
          this.$message({
            message: response.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          this.getAdminList();
        } else {
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      });
    },

    //下拉选择变化
    changeRole(val) {
      // this.listQuery.category_idC = null
      //this.$set(this.listQuery, 'category_idC', null)
      fetchAdminList({ role_id: val }).then(response => {
        //var data = response.data;
        console.log(response.data);
        this.adminList = response.data.data;
        //this.joinArr1 = data;
      });
    },

    //搜索下拉使用
    getAllRoleList() {
      fetchRoleList(this.listQuery).then(response => {
        var data = response.data;
        this.roleArr = data;
        console.log(data);
      });
    },
    //账号启用、禁用状态切换操作
    changeStatus(scope, status) {
      // console.log(scope.row, status);
      this.$set(this.adminList[scope.$index], "status", status == 1 ? 2 : 1);

      this.$confirm("确定要执行该操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const _this = this;
          changeAdmin({ id: scope.row.id, status: status == 1 ? 2 : 1 }).then(
            response => {
              //this.confirmVisible = false;
              this.$message.success(response.msg);
              this.getAdminList();
            }
          );
        })
        .catch(() => {
          // this.$set(this.adminList[scope.$index], 'status', status == 1 ? 2 : 1)
          console.log(this.adminList);
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },

    //删除用户
    deleteAdmin(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteAdmin({ id: id }).then(response => {
            // console.log(response);
            if (response.code == 0) {
              this.$message({
                message: response.msg,
                type: "success"
              });
              this.getAdminList();
            } else {
              this.$message({
                message: response.msg,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //账号启用、禁用状态切换操作
    resetPwd(id) {
      this.$confirm(
        "此操作将重置该用户密码为 " + this.df_pwd + " 是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          resetAdmin({ id: id }).then(response => {
            //this.confirmVisible = false;
            this.$message.success(response.msg);
            this.getAdminList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    }
  }
};
</script>

<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
</style>
